<template>
  <div>
    <el-input placeholder="请输入商品关键字" v-model="params.string" class="input-with-select" size="small">
      <el-button slot="append" icon="el-icon-search" @click="search()"></el-button>
    </el-input>
    <div style="position: relative">
      <div class="img-wrap" v-if="tableData.map && tableData.map.length">
        <div class="list" v-for="(item, index) in tableData.map" :key="'imgPath'+index" @click="handleClick($event,item)">
          <pt-upload class="update" :upLoadImg="item.imgPath" :disabled="true" />
        </div>
      </div>
      <div class="result-text" v-else>{{isShowText ? '未查询到结果': ''}}</div>
      <pt-table-loading v-show="isloading" />
      <el-row type="flex" justify="end" style="margin-top: 10px;">
        <el-button :disabled="params.page <= 0" @click="changePage(false)">上一页</el-button>
        <el-button :disabled="!tableData.total || (tableData.total && params.page >= (Math.ceil(tableData.total / 32)) - 1)" @click="changePage(true)">下一页</el-button>
      </el-row>
    </div>
  </div>
</template>
<script>
  import { recommendedPicture } from '@/api/com'
  export default {
    props: { 
      name: {
        type: String,
        default: ''
      }
    },
    data() {
      return {
        params: { //查询数据
          page: 0,
          size: 32,
          string: ''
        },
        isShowText: false, // 是否执行过请求列表
        isloading: false,
        tableData: {}, //表单数据
        timeStamp: null
      }
    },
    methods: {
      handleClick($el, item) { //确认选择
        if ($el.timeStamp - this.timeStamp < 300) return false
        this.timeStamp = $el.timeStamp
        this.$emit('choseImg', item.imgPath, item.id)
      },
      changePage(type,val) { // 分页器
        if (type) {
          this.params.page++
        } else {
          this.params.page--
        }
        this.getTableList()
      },
      search() {
        this.params.page = 0
        this.params.size = 32
        this.getTableList()
      },
      getTableList() { //获取订单数据
        this.isloading = true
        const params = {...this.params}
        recommendedPicture(params).then(res => {
          if (res.success) {
            this.isShowText = true
            this.tableData = res.data
          }
        }).finally(() => { this.isloading = false })
      }
    },
    mounted() {
      this.params.string = this.name
      this.getTableList()
    },
  }
</script>
<style lang="scss" scoped>
  .result-text{
    height: 100px;
    text-align: center;
    line-height: 100px;
    color: #999;
  }
  .img-wrap{
    display: flex;
    flex-flow: row wrap;
    .list{
      margin: 5px;
      width: 100px;
      height: 100px;
      .update{
        width: 100px;
        height: 100px;
      }
    }
  }
</style>
